<template>
    <div class="trouble">
        <Header title="房屋报修" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <loading  v-if="isflag" />
        <div class="cat_wrapper">
            <div class="box_repair" v-for="(item,index) in list" :key="index" @click="Worker(item.List)">
            <div>
                <img class="die_han" v-if="item.image" :src="item.image">
                <!-- <img class="die_han" v-if="item.image === '' " src="../assets/icon_picture.png" alt=""> -->
            </div>
            <div class="box_main">
                <div class="die_flex">
                    <p class="die_firt">{{item.List.title}}</p>
                    <p class="die_last">{{item.List.createDate}}</p>
                </div>
                <p class="die_nowp">{{item.List.content}}</p>
                <p class="die_new">{{item.List.stateDesc}}</p>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import {trouble} from '../old_request'
export default {
    data(){
        return {
            list:[],
            icon:require('../assets/icon_picture.png'),
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        Worker(list){
            let that = this;
            //console.log(list)
            that.$router.push({
                name:'worker',
                params:{
                    List:list
                }
            })
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}blockId=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
            "timestamp":that.wrapper.gettime(),
            "blockId":that.$store.state.blockid,
            "userId":that.$store.state.userid,
            "pageNo":1,
            "pageSize":10
        }
        trouble(data,that).then( (res)=>{
            console.log(res)
            if(res.code === 0){
                that.isflag = false;
                let newlist = [];
                res.data.map( (item,index) => {     //以为图片有多张 所以重新构造一个对象
                    let data = {
                        image:res.data[index].images.split(",").splice(0,1), //拿出有多张图片的第一张
                        List:res.data[index]
                    };
                    if(res.data[index].images === ""){
                        data = {
                        image:that.icon,            //一张图片都没有的本地赋值一张给他
                        List:res.data[index]
                    };
                    }
                    newlist.push(data)              //到最后写入对象
                })
                that.list = newlist;
                //console.log(that.list)
            }
        })
    }
}
</script>

<style scoped>
    .trouble{
        padding: 0px;
        width: 100%;
        height: 100% !important;
        background: #EFEFF4;
        z-index: 9999999;
        margin-top: 50px;
    }
    .trouble::before{
        content: ' ';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #EFEFF4;
        background-size: 100% auto;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .cat_wrapper{
        padding: 1px 0px;
    }
    .box_repair{
        width: 95%;
        margin: 10px auto;
        background: white;
        display: flex;
    
    }
    .box_repair .die_han{
        height: 84px;
        width: 125px;
        margin: 8px;
    }
    .box_main{
        flex: 1;
        padding-right: 10px;
        position: relative;
    }
    .box_main .die_flex{
        display: flex;
        margin: 18px 0 13px 0;
        position: relative;
    }
    .die_firt{
        font-size: 18px;
    }
    .die_last{
        position: absolute;
        right: 0px;
        color: #ccc;
    }
    .box_main .die_nowp{
        width: 206px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 14px;
        color: #ccc;
        font-size: 15px;
    }
    .die_new{
        color: #DD0000;
        /* position: absolute;
        right: 12px; */
        text-align: right;
        padding-bottom: 8px;
        font-size:13px;
    }
</style>